×
☰ Borders In HTML CSS And JavaScript 100+

WcCoder

Borders In HTML CSS And JavaScript

Here many types of borders are created in HTML CSS JavaScript.

You can use all these borders anywhere.

All the borders available on this page are auto fit borders. All these borders adjust according to your device.

The width of all the borders present on this page is 80%, if you want you can increase or decrease its width, and the width is auto.

You can make some changes in these borders, Ex:-- Height, Width, Background, Color, Position, Paragraph.

The border-style property specifies the type of border that will be displayed. Valid options for the the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit. Most of the styles alter the border appearance, but none and inherit are special. Setting the border-style to none disables borders, and inherit uses the border-style inherited from a less-specific selector.

The border-width property specifies how wide the border around a box should be. Borders are usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel, dashed border around all the anchors On a page, you use the following CSS:
a { border-width: 1px; border-style: solid;}

You can also use them to give a better look to text and paragraphs in your website.

WcCoder.com also runs new border projects built from HTML CSS JavaScript.

Input Output
HTML & CSS 62 
               <table border="0" style="overflow: hidden;position: relative;height: auto;width: 90%;padding: 0px;margin: auto;top: 10px;box-shadow: 0px 0px 6px 2px rgba(18, 0, 44, 1.0);">
                        <tr>
                            <td style="position: relative">
                                <div style="border: 0px orangered double;margin: 20px;padding: 10px;text-align: justify;border: 4px black solid;">                                                
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                    cillum dolore eu fugiat nulla pariatur. 

                                    <div style="position: absolute;border-top: 4px black solid;border-left: 4px black solid;height: 70%;width: 45%;top: 0;left: 0;">
                                    </div>
                                    <div style="position: absolute;border-bottom: 4px black solid;border-right: 4px black solid;height: 70%;width: 45%;bottom: 0;right: 0;">
                                    </div>                                            

                                </div>
                            </td>
                        </tr>
                    </table>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.